<template>

<!--开始页进度条-->
    <view style="padding-bottom: 20rpx;padding-top: 20rpx;background: #EFEDC9FF;">
      <uni-section title="项目整体进度" type="line" padding>
        <uni-steps :options="orderList" active-icon="checkbox" :active="active" />
      </uni-section>
    </view>
  <!--卡片-->
  <view>
    <uni-card title="代跑取药"
              extra="服务内容"
              :border = "true"
              :thumbnail="avatar"
              :is-shadow="true"
              padding = "1rpx">
    </uni-card>
  </view>
<!--  <view style="background: #ffffff; border: 1px solid #EBEEF5;">-->
<!--    <text >所在医院：</text>-->
<!--    <uni-data-select-->
<!--        v-model="value"-->
<!--        :localdata="range"-->
<!--        @change="change"-->
<!--        placeholder="请选择医院"-->
<!--    ></uni-data-select>-->
<!--    <view class="gray-line"></view>-->
<!--  </view>-->


  <!--绘制表单-->
  <view style = "padding: 15px;
		background-color: #ffffff;">
    <uni-forms ref="baseForm"  :modelValue="baseFormData" :border="true" >
      <uni-forms-item label="所在医院" required  label-width="70" label-align = "center">
        <uni-data-select :localdata="range" v-model="baseFormData.hospitalIndex" placeholder="请选择医院" />
      </uni-forms-item>
      <uni-forms-item label="服务时间" required label-width="70" label-align = "center">
          <uni-datetime-picker returnType="timestamp" v-model="baseFormData.serveTime" @change="changeLog()" />
      </uni-forms-item>
      <uni-forms-item label="手机号码" required label-width="70" label-align = "center">
        <uni-easyinput v-model="baseFormData.phoneNum" placeholder="请输入手机号码" />
      </uni-forms-item>
      <uni-forms-item label="收件信息" required label-width="70" label-align = "center">
        <uni-easyinput v-model="baseFormData.address" placeholder="请输入手机号码" />
      </uni-forms-item>
       <view style="margin-top: 40rpx">
         <text style="font-size: 30rpx">服务备注：</text>
         <uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="请输入备注信息" />
       </view>
    </uni-forms>
  </view>

  <view style="background: #ffffff">
    <button type="primary" plain="true" style="width: 60%; padding-left: 35rpx"
            @click="submit('baseForm')">提交</button>
  </view>



</template>
<script setup>

import { ref,toRaw } from "vue";
import {onLoad} from '@dcloudio/uni-app';

const orderList = ref([{
  title: '填写订单'
}, {
  title: '在线支付'
}, {
  title: '专人服务'
}, {
  title: '服务完成'
}]);


//返回时间戳
const changeLog = (e) => {
  console.log('时间选择：' + e);
//  serveTime.value = e;
}

const submit = (formName) => {
  console.log("表单数据：" + JSON.stringify(toRaw(baseFormData.value)));

  uni.showToast({
    title: '提交成功',
    icon: 'success'
  });
}



const range = ref([{
  value: '0',
  text: '武汉医院'
}, {
  value: '1',
  text: '协和医院2'
}]);

const baseFormData = ref({
  hospitalIndex:'1',
  serveTime:1740120153000 ,
  phoneNum:'15665401015',
  address:'湖北省武汉市洪山区珞瑜路1037号',
  remark:'快件请尽快送达'
})
const active = ref(1);

const avatar = ref("https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png");


onLoad((option)=>{
  console.log("首页传递过来的信息：" + JSON.stringify(option));

});

</script>

<style scoped lang="scss">

.gray-line {
  width: 100%; /* 线的宽度 */
  height: 1px; /* 线的高度 */
  background-color: #d1d0d0; /* 灰色 */
}



</style>